<template>
	<div class="login-container" :style="{ boxShadow: `var(--el-box-shadow-light)` }">
		<el-form :rules="rules" :model="loginData">
			<div class="tou">
				<h2>邮箱注册</h2>
			</div>
			<el-form-item label="邮箱:" prop="email">
				<el-input @keyup.enter="add()" v-model="loginData.email" placeholder="请输入邮箱"></el-input>
			</el-form-item>
			<el-form-item label="密码:" prop="password">
				<el-input @keyup.enter="add()" v-model="loginData.password" placeholder="请输入密码"></el-input>
			</el-form-item>
			<el-form-item label="确认密码:" prop="password1">
				<el-input @keyup.enter="add()" v-model="loginData.password1" placeholder="确认密码"></el-input>
			</el-form-item>
			<el-form-item class="youxiang" label="邮箱验证码:" prop="randomCheckCode">
				<el-input @keyup.enter="add()" v-model="loginData.randomCheckCode" placeholder="验证码"></el-input>
				<el-button @click="youjian()" :loading="btnLoading" count=60 class="fasong">{{interCount}}</el-button>
			</el-form-item>
			<el-form-item label="邀请码（可选）:">
				<el-input v-model="inviteCode" @keyup.enter="add()" placeholder="邀请码"></el-input>
			</el-form-item>
			<div class="an">
				<el-row class="mb-4">
					<el-button @click="add()" type="primary" round>注 册</el-button>
				</el-row>
			</div>
			<el-switch v-model="value1" active-text="同意所有条款">
			</el-switch>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loginData: {},
				rules: {
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 8,
							max: 16,
							message: '密码为8-16位',
							trigger: 'blur',
						},
					],
					password1: [{
						required: true,
						message: '请输入确认密码',
						trigger: 'blur'
					}],
					email: {
						required: true,
						message: '请输入邮箱',
						trigger: 'blur'
					},
					randomCheckCode: {
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					},
				},
				inviteCode:"",
				random: 0,
				you: "",
				interCount: '发送',
				btnLoading: false,
			}
		},
		props: {
			count: {
				type: Number,
				default: 60,
				required: true
			}
		},
		mounted(){
			this.inviteCode = this.$route.query.yaoqing
		},
		methods: {
			youjian() {
				var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				if (this.loginData.email == null) {
					alert("请将邮箱填好")
					return;
				} else if (this.loginData.email != '' && !regEmail.test(this.loginData.email)) {
					alert("请输入正确的邮箱地址")
					return;
				} else {
					this.$axios.get('/mail/send', {
							params: {
								email: this.loginData.email
							}
						})
						.then(data => {
							this.btnLoading=true;
							this.interCount = this.count;
							setInterval(() => {
								if (this.interCount <= 0) {
									this.btnLoading=false;
									this.interCount = "重新发送";
								}
								if (this.interCount > 0) {
									this.interCount--;
								}
							}, 1000)
							alert("发送成功")
							this.you = data.result.randomCheckCode
							this.loginData.randomCheckCode = this.you;
						})
				}
			},
			add() {
				var pass = /^(?=.*[A-Za-z])(?=.*\d)[^]{8,16}$/;
				var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				if (this.loginData.randomCheckCode == null) {
					alert("验证码为空")
					return;
				} else if(this.loginData.password==null){
					alert("密码为空")
					return;
				} else if(this.loginData.password1==null){
					alert("确认密码为空")
					return;
				} else if(this.loginData.email==null){
					alert("密码为空")
					return;
				} else if (this.loginData.randomCheckCode != this.you || this.you == null) {
					alert("验证码错误")
					return;
				} else if(!pass.test(this.loginData.password)){
					alert("请输入正确的密码格式")
				} else if (this.loginData.email != '' && !regEmail.test(this.loginData.email)) {
					alert("请输入正确的邮箱地址")
					return;
				} else if (this.loginData.password != this.loginData.password1) {
					alert("前后密码不一致")
					return;
				} else {
					this.$axios.get('/user/emailTesting', {
							params: {
								email: this.loginData.email
							}
						})
						.then(data => {
							if (data.code === 0) {
								let ok = data.result.ok;
								if (ok == true) {
									this.$axios.get('/user/adduser', {
											params: {
												password: this.loginData.password,
												email: this.loginData.email,
												inviteCode: this.inviteCode 
											}
										})
										.then(data => {
											if (data.code === 0) {
												let num = data.result.num;
												if (num > 0) {
													this.$router.push({
														path: '/login'
													})
												}else{
													alert("注册失败")
												}
											} else {
												alert("服务器错误，请联系客服")
											}
										})
								} else {
									alert("邮箱已存在")
								}
							} else {
								alert("服务器错误，请联系客服")
							}
						})
				}
			}
		}
	}
</script>

<style>
	.login-container {
		display: flex;
		justify-content: center;
		position: relative;
		align-items: center;
		top: 20px;
		margin: 0 auto;
		width: 600px;
		height: 600px;
		border: gray solid 1px;
		border-radius: 5px;
	}

	.tou {
		display: flex;
		justify-content: center;
	}

	.an {
		display: flex;
		justify-content: center;

	}

	.youxiang {
		display: flex;
		flex-flow: row;
	}
	
	.fasong{
		width: 80px;
	}
</style>
